<div class="row">
  <div class="offset-md-3 col-md-6">
    <div class="card">
      <div class="card-header">
        <h1>{{ $ctrl.name }}</h1>
      </div>
      <div class="card-block">
        <form id="form" name="form" class="form" ng-submit="$ctrl.signup()" novalidate>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group" ng-class="{'has-danger':form.firstName.$invalid && !form.firstName.$pristine}">
                <label class="form-control-label" for="firstName">{{'firstName'}}</label>
                <input class="form-control" id="firstName" name="firstName" ng-model="$ctrl.data.firstName" required/>
                <div class="form-control-feedback" ng-messages="form.firstName.$error" ng-if="form.firstName.$invalid && !form.firstName.$pristine">
                  <p ng-message="required">FirstName is required</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group" ng-class="{'has-danger':form.lastName.$invalid && !form.lastName.$pristine}">
                <label class="form-control-label col-md-12" for="lastName">{{'lastName'}}</label>
                <input class="form-control" id="lastName" name="lastName" ng-model="$ctrl.data.lastName" required/>
                <div class="form-control-feedback" ng-messages="form.lastName.$error" ng-if="form.lastName.$invalid && !form.lastName.$pristine">
                  <p ng-message="required">LastName is required</p>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-class="{'has-danger':form.username.$invalid && !form.username.$pristine}">
            <label class="form-control-label" for="username">{{'username'}}</label>
            <input class="form-control" id="username" name="username" ng-model="$ctrl.data.username" required ng-minlength="6" ng-maxlength="20" />
            <div class="form-control-feedback" ng-messages="form.username.$error" ng-if="form.username.$invalid && !form.username.$pristine">
              <p ng-message="required">Username is required</p>
              <p ng-message="minlength">Username is too short(at least 6 chars)</p>
              <p ng-message="maxlength">Username is too long(at most 20 chars)</p>
            </div>
          </div>
          <div class="form-group" ng-class="{'has-danger':form.password.$invalid && !form.password.$pristine}">
            <label class="form-control-label" for="password">{{'password'}}</label>
            <input class="form-control" type="password" name="password" id="password" ng-model="$ctrl.data.password" required ng-minlength="6" ng-maxlength="20" />
            <div class="form-control-feedback" ng-messages="form.password.$error" ng-if="form.password.$invalid && !form.password.$pristine">
              <p ng-message="required">Password is required.</p>
              <p ng-message="minlength,maxlength">Password should be consist of 6 to 20 chars.</p>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg" ng-disabled="form.$invalid || form.$pending">  {{'SIGN UP'}}
          </div>
        </form>
      </div>
      <div class="card-footer">
        Already registered, <a  href="#" ui-sref="app.signin">{{'signin'}}</a>
      </div>
    </div>
  </div>
</div>
